<template>
	<view class="content">
		<view class="address-order">
			<!-- <view class="address" v-if="type != 'xxz'">
				<view class="name">
					<image src="http://shoe-orange.laiwang.work/img/myaddress.png" mode=""></image>
					<text>鞋柜编号：山东大学001号</text>
				</view>
				<view class="address-des">
					地址：北京市东城区未来路4号楼1254室
				</view>
			</view> -->
			<view class="order">
				<view class="order-li">
					<image :src="'https://www.sdxiecheng.cn/'+orderInfo.goods_image" mode=""></image>
					<view class="order-li-right">
						<view class="name">{{orderInfo.goods_title}}</view>
						<view class="des">{{orderInfo.goods_describle}}</view>
						<view class="price">¥{{orderInfo.goods_price}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="order-info">
			<view class="order-info-li">
				<view>用户名：</view>
				<text>{{ orderInfo.user.username}}</text>
			</view>
			<view class="order-info-li" @click="callPhoneNumber(orderInfo.user.mobile)">
				<view>手机号：</view>
				<text>{{ orderInfo.user.mobile}}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.shoecase_name">
				<view>鞋柜：</view>
				<text>{{ orderInfo.name }} <text v-if="orderInfo.shoecase_name">{{ orderInfo.shoecase_name }}</text>号柜门</text></text>
			</view>
			<view class="order-info-li">
				<view>下单时间：</view>
				<text>{{ orderInfo.createtime }}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.deposittime">
				<view>存鞋时间：</view>
				<text>{{ orderInfo.deposittime }}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.taketime">
				<view>取鞋时间：</view>
				<text>{{ orderInfo.taketime }}</text>
			</view>
			<view class="order-info-li">
				<view>订单编号：</view>
				<text>{{ orderInfo.order_sn }}</text>
			</view>
			<view class="order-info-li">
				<view>备注信息：</view>
				<text>{{ orderInfo.remark }}</text>
			</view>
			<view class="order-info-li shuxiang" >
				<view>附件：</view>
				<image style="margin-top: 20rpx;" v-if="orderInfo.enclosure_images" @click="previewImage(orderInfo.enclosure_images)" :src="orderInfo.enclosure_images" mode=""></image>
			</view>
		</view>
		<view class="tiaoxingcode" v-if="type != 'ywc' && type !='yhdqx'">
			<view class="tiaoxingcode-title">填写信息</view>
			<view class="tiaoxingcode-box">
				<input type="text" placeholder="条形码" :disabled="type == 'dcx'" v-model="barCode" />
				<u-icon @click="scanCode" name="scan" color="#666" size="28"></u-icon>
			</view>
		</view>
		<view  v-if="type != 'ywc' && type !='yhdqx' " class="btn-box" style="padding-bottom: 40rpx;">
			<button class="u-reset-button btn3" @click="isOpen(1)">打开柜门</button>
			<button class="u-reset-button btn3" @click="isOpen(2)">再次开门</button>
		</view>
		<!-- 取鞋照片 -->
		<view class="tiaoxingcode" v-if="type !='yhdqx'">
			<view class="tiaoxingcode-title">填写信息 <text>上传鞋子图片</text></view>
			<view class="tiaoxingcode-list">
				<text class="des">取鞋凭证</text>
				<view>
					<u-upload 
					width="140" 
					height="140" 
					max-count="9" 
					upload-text="取鞋凭证"
					@on-success="success" 
					:show-progress="type == 'dqx'" 
					:deletable="type == 'dqx'"  
					@on-remove="remove" 
					:file-list="take_shoes_imagesM"
					:action="action"
					:custom-btn="true"
					>
						<view slot="addBtn" v-if="type == 'dqx'" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<u-icon name="plus" size="40" ></u-icon>
								<text>取鞋凭证</text>
						</view>
					</u-upload>
				</view>
				<text class="des" v-if="type == 'dcx' || type=='ywc'" >存鞋凭证</text>
				<view>
					<u-upload 
					width="140" 
					v-if="type == 'dcx' || type=='ywc'" 
					height="140" 
					max-count="9" 
					upload-text="存鞋凭证" 
					:action="action"
					 @on-success="successC" 
					 :show-progress="type == 'dcx'" 
					 :deletable="type == 'dcx'"  
					 @on-remove="removeC"
					 :file-list="store_shoes_imagesM" 
					 :custom-btn="true"
					 >
					 <view slot="addBtn" v-if="type == 'dcx'" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					 		<u-icon name="plus" size="40" ></u-icon>
					 		<text>存鞋凭证</text>
					 </view>
					 </u-upload>
				</view>
				
				
			</view>
			
			
		</view>
		<view class="btn-box" v-if="type == 'dqx'">
			<button class="u-reset-button btn3" @click="isPay(0)">确定取鞋</button>
		</view>
		<view class="btn-box" v-if="type == 'dcx'">
			<button class="u-reset-button btn3" @click="isPay(1)">确定存鞋</button>
		</view>
		<!-- 开柜子弹窗 -->
		<!-- 取消订单 -->
		<u-modal v-model="guiziShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
			:confirm-style="confirmStyle"
			@confirm="isOpenGuiZi"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}"
		> 
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text>
						打开柜门
					</text>
					<text>
						请确保本人在柜子前面
						</text>
				</view>
			</view>
		</u-modal>
		<!-- 柜子打开成功 -->
		<u-modal v-model="guiziChengGongShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10" 
			:confirm-style="confirmStyle"
			confirm-text="完成"
			@confirm="guiziChengGongShow = false"
			
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}"
		> 
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text style="color: #FF9A33;">
						{{num}}号
					</text>
					<text v-if="type == 'dqx'">
						柜门已打开，请取鞋
					</text>
					<text v-if="type == 'dcx'">
						柜门已打开，请存鞋
					</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:'https://www.sdxiecheng.cn/index/ajax/upload',
				fileList:[],
				guiziShow:false,
				guiziChengGongShow:false,
				confirmStyle:{
					'borderLeft': '1px solid #EEEEEE'
				},
				type:'',
				id:0,
				orderInfo:[],
				num:'',
				take_shoes_images:[],
				store_shoes_images:[],
				take_shoes_imagesM:[],
				store_shoes_imagesM:[],
				barCode:'',
				opentypes:1
			}
		},
		onLoad(e) {
			console.log(e)
			this.type = e.type
			this.id = e.id
			this.getDcxOrder()
		},
		methods: {
			 callPhoneNumber(e) {
			     console.log("拨打")
			     uni.makePhoneCall({
			     	// 手机号e
			     	phoneNumber:e,
			     	// 成功回调
			     	success: (res) => {
			     		console.log(1111)
			     	},
			     	// 失败回调
			     	fail: (res) => {
			     		console.log(22222)
			     
			     	}
			     });
			    },
			isOpen(val){
				this.guiziShow = true
				this.opentypes =val
				console.log(val)
			},
			isPay(type){
				uni.$u.http.post('/delivery/store_shoes',{
					id:this.id,
					type:type,
					take_shoes_images:this.take_shoes_images.join(','),
					store_shoes_images:this.store_shoes_images.join(',')
				}).then(res =>{
					console.log(res)
					uni.showToast({
						icon:'none',
						title:res.msg
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},500)
				}).catch(err =>{
					console.log(err)
					uni.showToast({
						icon:'none',
						title:err.data.msg
					})
				})
			},
			success(e){
				console.log(e)
				this.take_shoes_images.push(e.data.fullurl)
			},
			remove(index, lists, name){
				this.take_shoes_images.splice(index,1)
			},
			successC(e){
				console.log(e)
				this.store_shoes_images.push(e.data.fullurl)
			},
			removeC(index, lists, name){
				this.store_shoes_images.splice(index,1)
				console.log(index, lists, name)
			},
			isOpenGuiZi(){
				this.guiziShow = false
				uni.showLoading({
					title:'柜子打开中。。。'
				})
				// let that = this
				if(this.type == 'dqx'){
					this.quxieOpen()
				}else if(this.type == 'dcx'){
					this.cunxieOpen()
				}
			},
			// 预览图片
			previewImage(url){
				console.log(url)
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 取鞋打开柜子
			quxieOpen(){
				let that = this
				uni.$u.http.post('/delivery/open_cshoe',{
					order_id:that.id,
					opentype:that.opentypes
				}).then(res =>{
					that.guiziChengGongShow = true
					that.num = res.data.info
					uni.hideLoading()
					console.log(res)
				}).catch(err =>{
					console.log(err)
					uni.showToast({
						icon:'none',
						title:err.data.msg
					})
				})
			},
			// 存鞋打开柜子
			cunxieOpen(){
				let that = this
				uni.$u.http.post('/delivery/open_save',{
					order_id:this.id,
					opentype:this.opentypes
				}).then(res =>{
					that.guiziChengGongShow = true
					that.num = res.data.info
					uni.hideLoading()
					console.log(res)
				}).catch(err =>{
					console.log(err)
					uni.showToast({
						icon:'none',
						title:err.data.msg
					})
				})
			},
			// 待存订单详情
			getDcxOrder(){
				let that=this
				uni.$u.http.post('/delivery/order_detail',{
					id:that.id
				}).then(res =>{
					console.log(res)
					switch(res.data.delivery_status){
						case 0:
							that.type = 'yhdqx'
						break;
						case 1:
							that.type = 'dqx'
						break;
						case 2:
							that.type = 'xxz'
						break;
						case 3:
							that.type = 'dcx'
						break;
						case 4:
							that.type = 'ywc'
						break;
					}
					that.orderInfo = res.data
					
					if(that.type == 'dcx'){
						that.barCode = res.data.txm_msg
					}
					if(res.data.take_shoes_images){
						res.data.take_shoes_images.forEach(item =>{
							that.take_shoes_imagesM.push({
								url:item
							})
						})
						
					}
					if(res.data.store_shoes_images){
						res.data.store_shoes_images.forEach(item =>{
							that.store_shoes_imagesM.push({
								url:item
							})
						})
						
					}
					
				})
			},
			// 扫描条形码
			scanCode(){
				let that = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.barCode = res.result
					}
				});
			},
			
		}
	}
</script>

<style lang="less">
	.content{
		padding: 10rpx 20rpx;
	}
.address-order{
	background: #FFFFFF;
	border-radius: 10rpx;
	.address{
		padding: 30rpx;
		padding-bottom: 40rpx;
		background: url('http://shoe-orange.laiwang.work/img/address-line.png') bottom no-repeat;
		background-size: 100%;
		.name{
			image{
				width: 24rpx;
				height: 30rpx;
				margin-right: 19rpx;
			}
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 27rpx;
		}
		.address-des{
			color: 24rpx;
			color: #666666;
		}
	}
}
// 订单样式
.order{
	padding: 0 9rpx;
	padding-top: 34rpx;
	.order-li{
		display: flex;
		align-items: center;
		padding-bottom: 35rpx;
		image{
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}
		.order-li-right{
			width: calc(100% - 150rpx);
			padding-left: 20rpx;
			.name{
				font-size: 30rpx;
			}
			.des{
				font-size: 24rpx;
				margin-top: 9rpx;
				margin-bottom: 9rpx;
			}
			.price{
				font-size: 36rpx;
				font-weight: 500;
				color: #FF9A33;
			}
		}
		
	}
}
// 订单信息
.order-info{
	// min-height: 654rpx;
	background: #FFFFFF;
	// border-radius: 10rpx;
	border-radius:  0 0 10rpx 10rpx;
	border-top: 1px solid #EEEEEE;
	// margin-top: 20rpx;
	padding: 39rpx 21rpx;
	.order-info-li{
		display: flex;
		align-items: center;
		line-height: 60rpx;
		font-size: 30rpx;
	}
	.shuxiang{
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.name{
			margin-bottom: 20rpx;
		}
		image{
			width: 209rpx;
			height: 209rpx;
		}
	}
}
// 配送信息
.peisong{
	margin-top: 50rpx;
	.title{
		font-size: 30rpx;
		font-weight: 500;
	}
	.image-list{
		display: flex;
		align-items: center;
	}
	.image-li{
		width: 180rpx;
		margin-right: 30rpx;
		image{
			width: 180rpx;
			height: 180rpx;
			margin-bottom: 18rpx;
		}
		text{
			font-size: 28rpx;
			color: #7C7C7C;
			text-align: center;
		}
	}
}
.btn-box{
	padding-bottom: 98rpx;
	.btn3{
		width: 650rpx;
		height: 80rpx;
		background: #FBAA27;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
	}
}

// 底部按钮
.order-bottom-box{
	width: 100%;
	height: 98rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #FFFFFF;
	padding: 0 30rpx;
	.order-bottom-info{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.price{
			font-size: 36rpx;
			font-weight: 500;
			text{
				color: #FF9A33;
			}
		}
		button{
			margin: 0 ;
			width: 200rpx;
			height: 70rpx;
			border-radius: 35rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FF9A33;
		}
	}
}
// 售后
.shouhou-li{
	font-size: 30rpx;
	font-weight: 500;
	line-height: 60rpx;
	textarea{
		width: 100%;
		height: 200rpx;
		border: 2rpx solid #F2F2F2;
		padding: 20rpx;
		font-weight: normal;
		margin-top: 20rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		line-height: normal;
	}
}
// 条形码信息
.tiaoxingcode{
	width: 100%;
	margin-top: 20rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 39rpx 21rpx;
	.tiaoxingcode-title{
		font-size: 30rpx;
		text{
			color: #646464;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}
	.tiaoxingcode-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		input{
			width: 80%;
		}
	}
	.tiaoxingcode-list{
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		.des{
			margin-bottom: 10rpx;
		}
	}
}
.slot-btn {
	width: 140rpx;
	height: 140rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: rgb(244, 245, 246);
	border-radius: 10rpx;
	text{
		margin-top: 10rpx;
	}
}

.slot-btn__hover {
	background-color: rgb(235, 236, 238);
}
</style>
